<template>
    <div>
        <SidePage></SidePage>
        <div class="box"></div>
        <h1 style="text-align: center;margin-top: 10px; font-size: 40px; font-weight: bold;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: brown; color: white;">About schools----山东理工职业学院</h1>
        <!-- schools 关于学校 -->
        <div class="school">
        <div class="pic">
            <div class="item" v-for="(item,index) in pic" :key="index" >
               <img :src="item.src" width="300px" height="385px">
            </div>
        </div>
        <div class="txt">
            <p> 据2024年5月学校官网信息，近年来先后承担各类科研项目1000余项，促进济宁市科技成果转化120余项，累积实现技术交易额4000余万元，孵化高新技术企业13家，技术服务产生的经济效益5.3亿，社会培训服务达28万人次。 [35]
截至2019年1月，学校科技成果转移转化中心自成立以来，累计承担各类科研项目34项，促成省内科技成果转化19项， 年度实现横向技术服务到款额4350万元，孵化3家国家高新技术企业。与理工精密共同研发的《空心滚珠丝杠副系列产品的研发与产业化》获得国家技术市场金桥奖优秀项目奖，《互联网 光伏电站智能化运维管理平台》项目获得省教育厅科学技术奖一等奖。
2018年度，学校成功申报2018年度人文社科类课题52项，自然科学项目11项。其中，《山东省智能制造产业优化及发展模式研究》获省科技厅重大专项课题立项，《职业教育校企合作的有效性评价体系研究与实践》获全国教育科学“十三五”规划课题教育部重点课题立项，同时承接省、市科技部门组织的重点研发计划，其中省重点立项7项，市重点立项3项。2018年度纵向课题资助经费总额627.7万元。同时组织了30项院级课题立项，25项院级课题结题及省、市级课题结题工作。
2018年度，学校共申报专利152项，其中发明专利19项，实用新型专利133项；与理工精密和理工昊明、德诚智能等企业共同申报专利技术100余项。 据2024年5月学校官网信息，学校先后与70余所海外高校和科研院所建立友好合作关系，获批中外合作办学机构，成立2所海外分校。牵头57家院校、企业在9个国家建立15个海外职业技术学院校区。</p>
            <p class="eraser">
                <span class="text">
                    据2024年5月学校官网信息，近年来先后承担各类科研项目1000余项，促进济宁市科技成果转化120余项，累积实现技术交易额4000余万元，孵化高新技术企业13家，技术服务产生的经济效益5.3亿，社会培训服务达28万人次。 [35]
截至2019年1月，学校科技成果转移转化中心自成立以来，累计承担各类科研项目34项，促成省内科技成果转化19项， 年度实现横向技术服务到款额4350万元，孵化3家国家高新技术企业。与理工精密共同研发的《空心滚珠丝杠副系列产品的研发与产业化》获得国家技术市场金桥奖优秀项目奖，《互联网 光伏电站智能化运维管理平台》项目获得省教育厅科学技术奖一等奖。
2018年度，学校成功申报2018年度人文社科类课题52项，自然科学项目11项。其中，《山东省智能制造产业优化及发展模式研究》获省科技厅重大专项课题立项，《职业教育校企合作的有效性评价体系研究与实践》获全国教育科学“十三五”规划课题教育部重点课题立项，同时承接省、市科技部门组织的重点研发计划，其中省重点立项7项，市重点立项3项。2018年度纵向课题资助经费总额627.7万元。同时组织了30项院级课题立项，25项院级课题结题及省、市级课题结题工作。
2018年度，学校共申报专利152项，其中发明专利19项，实用新型专利133项；与理工精密和理工昊明、德诚智能等企业共同申报专利技术100余项。据2024年5月学校官网信息，学校先后与70余所海外高校和科研院所建立友好合作关系，获批中外合作办学机构，成立2所海外分校。牵头57家院校、企业在9个国家建立15个海外职业技术学院校区。
                </span>
            </p>
        </div>
        </div>
        <h1 style="text-align: center;margin-top: 10px; font-size: 40px; font-weight: bold;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: brown; color: white;">Regarding the experience</h1> 
      <div class="experience">
    <div class="row" v-for="(item,index) in experience" :key="index">
        <div class="tu">
            <img src="" alt="">
        </div>
        <div class="wenzi">
            <h1>{{ item.roleS }}</h1>
            <p>
              {{ item.text }}
            </p>
        </div>
    </div>
      </div>
    </div>
</template>
<script>
import SidePage from '@/components/SidePage.vue'
export default {
    components:{
        SidePage
    },
    data(){
        return{
            pic:[
                {
                    src:'https://img2.baidu.com/it/u=3784333616,1631661194&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3067708895,1799465716&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3952964989,36936153&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=449'
                },
                // -----
                {
                    src:'https://img2.baidu.com/it/u=549660128,2751598091&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=1513303444,1029709776&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
                },
                {
                    src:'https://img0.baidu.com/it/u=269587204,3994517811&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1345'
                },
                // ---------
                {
                    src:'https://img2.baidu.com/it/u=3343374519,3370257561&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1455'
                },
                {
                    src:'https://img2.baidu.com/it/u=2015445656,1247012005&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1428'
                },
                {
                    src:'https://img2.baidu.com/it/u=1925440351,2217858683&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
                },
            ],
            pic1:[],
            newsText:'About schools',
            newsText2:'Regarding the experience',
            experience:[],
            i:0,
            time:null,
            font:'',
            zhi:undefined,
        }
    },
    methods:{
        getabout(){
            this.$http.get('http://localhost:3002/jingli/jingli').then(res=>{
                console.log(res.data)
                this.experience= res.data.data.slice(0,4)
            })
        },
        schooldata(){
            this.$http.get('http://localhost:3002/school/school').then(res=>{
             console.log(res.data.data.introduction)
            })
        },
    },
    mounted(){
        this.getabout()
        this.schooldata()
        console.log(this.zhi)
    }
}
</script>

<style scoped>
.box{
    width: 99vw;
    height: 300px;
    /* border: 2px solid black; */
    background-image: url('https://cn.bing.com/th?id=OHR.MontBlancGlacier_ZH-CN2918240023_1920x1080.jpg');
background-position: center left;
}
.school{
    display: flex;
    justify-content: space-between;
    width:1900px;
    height: 400px;
    /* border: 2px solid black; */
}
.pic{
    display: flex;
    /* overflow-x: auto; */
    overflow-y:auto ;
    /* scroll-behavior: smooth; */
    width: 950px;
    height: 390px;
    margin-top: 3px;
    /* border: 2px solid rgb(180, 34, 34); */
    position: relative;
}
.txt{
    width: 950px;
    height: 390px;
    margin-top: 3px;
    /* border: 2px solid rgb(64, 66, 167); */
}
.item{
    margin-left:12px;
    width: 300px;
    height: 385px;
    /* border: 2px solid black; */
    /* overflow: hidden; */
    flex-shrink: 0; 
    transition: all;
}
.experience{
    width: 99vw;
    height: 900px;
    /* border: 2px solid black; */
}
.row{
    display: flex;
    justify-content: space-around;
    width: 99vw;
    height: 300px;
    /* border: 2px solid black; */
}
.tu{
    width: 500px;
    height: 290px;
    margin-top: 3px;
    overflow: hidden;
    background-image: url('https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2654.jpg');
}
.wenzi{
    width: 1200px;
    height: 290px;
    margin-top: 3px;
    /* border: 2px solid black; */
}
.txt{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 2;
    text-indent: 2em;
    position: relative;
}
.eraser{
    position: absolute;
    inset: 0;
    }
    @property --p{
            syntax: '<percentage>';
            initial-value: 0%;
            inherits: false;
        }
    .text{
        --p:10%;
        background-color:black;
        background:linear-gradient(to right, transparent var(--p),rgb(255, 255, 255) calc(var(--p) + 10px));
        color: transparent;
        animation: eraser 10s forwards linear;
    }
    @keyframes eraser {
            to {
                --p :100%;
            }
        }
</style>